<template>
    <el-dialog
            title="门店管理"
            :visible.sync="show"
            @opened="getRoleInfo"
            width="35%"
            top="10vh"
            :close-on-click-modal="closeOnClickModal"
            @close="hiddenReset"
            :before-close="hiddenReset">
        <div class="dialog-wrapper" v-loading="saveLoading">
            <el-form ref="form" label-width="80px" size="small">
                <el-form-item label="登录名">
                    {{userName}}
                </el-form-item>
                <el-form-item label="门店">
                    <div class="tree-container" style="height: 350px;overflow: auto">
                        <el-tree
                                :data="menu"
                                show-checkbox
                                node-key="accountId"
                                ref="tree"
                                highlight-current
                                :check-strictly="true"
                                :props="defaultProps">
                        </el-tree>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="hiddenReset" size="small">取 消</el-button>
            <el-button type="primary" size="small" @click="insertAndUpdate">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import { dialog } from '@/common/mixin'
    import DataSelect from '@/components/select/DataSelect'
    import { mapState } from 'vuex'
    export default {
        name: "",
        props: ['currentId'],
        mixins: [dialog],
        components: { DataSelect },
        data() {
            return {
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                menu: [],
                saveLoading: false,
                userName: '',
            }
        },
        methods: {
            async insertAndUpdate() {
              if(!this.$refs.tree.getCheckedKeys().join(',')){
                await this.$alert("请选择门店");
                return
              }
              await this.$post(this.$api.systemSettings.roleManage.accountModify, {
                userId: this.currentId,
                accountIds: this.$refs.tree.getCheckedKeys().join(','),
              });
              this.$alert('保存成功').then(() => {
                this.hidden();
                this.$emit('success');
              })
            },
            async getRoleInfo() {
                this.saveLoading = true;
                this.$refs.tree.setCheckedKeys([]);
                this.menu = await this.$post(this.$api.systemSettings.roleManage.getAccountTree, JSON.stringify({
                    accountType: null,
                }));

                let data = await this.$get(this.$api.systemSettings.roleManage.accountInfo, {
                    userId: this.currentId
                });
                // 角色名称
                this.userName = data.name || "";
                // 门店赋值
                let accountIds = data.accountIds && data.accountIds.split(',').map(item => parseInt(item)) || []
                console.log(accountIds)
                if( accountIds.length > 0 ) {
                    this.$refs.tree.setCheckedKeys(accountIds)
                } else {
                    this.$refs.tree.setCheckedKeys([])
                }
                this.saveLoading = false;
            }
        }
    }
</script>

<style scoped>

</style>